<template>
	<div>
		<my-title title="患者管理">
			<div>
				<el-cascader placeholder="科室/全部科室" size="small" v-model="value" :options="departmentOptions">
				</el-cascader>
			</div>
			<template v-slot:right>
				<div class="pr-1">
					<el-select v-model="value" placeholder="批量添加" size="medium">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-button type="primary" size="medium" @click="dialogVisible = true">添加患者</el-button>
				</div>
			</template>
		</my-title>

		<el-tabs v-model="activeName">
			<!-- 住院患者 -->
			<el-tab-pane label="住院患者" name="HOSPITALIZATION">
				<div class="flex flex-between items-center pb-2">
					<div class="flex items-center">
						<el-radio-group v-model="cardMode" size="small">
							<el-radio-button label="card">卡片模式</el-radio-button>
							<el-radio-button label="list">列表模式</el-radio-button>
						</el-radio-group>
						<div class="pl-2 font-14">系统科室患者共8人，达标率0%</div>
					</div>
					<div class="flex">
						<div class="flex">
							<div class="pr-1">
								<el-input class="w-300" placeholder="患者姓名/住院号/责任医生" size="small"></el-input>
							</div>
							<el-button size="small">查询</el-button>
							<el-button size="small">条件筛选</el-button>
						</div>
					</div>
				</div>
				<div>
					<div v-if="cardMode === 'card'">
						<card></card>
					</div>
					<div v-else>
						<list></list>
					</div>
				</div>
			</el-tab-pane>
			<!-- 本院非住院患者 -->
			<el-tab-pane label="本院非住院患者" name="HOSPITAL">
				<div>
					<div class="flex flex-between pb-2 items-center font-14">
						<div>非住院患者共6人</div>
						<div class="flex">
							<div class="pr-1">
								出院日期 ：
								<el-date-picker v-model="value1" type="date" size="small" placeholder="选择日期">
								</el-date-picker>
							</div>
							<div class="flex">
								<div class="pr-1">
									<el-input class="w-300" placeholder="患者姓名/住院号/责任医生" size="small"></el-input>
								</div>
								<el-button size="small">查询</el-button>
							</div>
						</div>
					</div>
				</div>
				<el-table height="250" border style="width: 100%">
					<el-table-column prop="address" align="center" label="住院号">
					</el-table-column>
					<el-table-column prop="address" align="center" label="姓名">
					</el-table-column>
					<el-table-column prop="address" align="center" label="历史住院号">
					</el-table-column>
					<el-table-column prop="address" align="center" label="性别">
					</el-table-column>
					<el-table-column prop="address" align="center" label="医院">
					</el-table-column>
					<el-table-column prop="address" align="center" label="科室">
					</el-table-column>
					<el-table-column prop="address" align="center" label="医生">
					</el-table-column>
					<el-table-column prop="address" align="center" label="当前医院">
					</el-table-column>
					<el-table-column prop="address" align="center" label="当前科室">
					</el-table-column>
					<el-table-column prop="address" align="center" label="当前病区">
					</el-table-column>
					<el-table-column prop="address" align="center" label="最近出科时间">
					</el-table-column>
					<el-table-column prop="address" align="center" label="操作"></el-table-column>
				</el-table>
			</el-tab-pane>
			<!-- 科室历史患者 -->
			<el-tab-pane label="科室历史患者" name="DEPARTMENT">
				<div class="flex flex-end pb-2">
					<div class="flex">
						<div class="pr-1">
							<el-input class="w-300" placeholder="患者姓名/住院号/责任医生" size="small"></el-input>
						</div>
						<el-button size="small">查询</el-button>
					</div>
				</div>
				<el-table height="250" border style="width: 100%">
					<el-table-column prop="address" align="center" label="住院号">
					</el-table-column>
					<el-table-column prop="address" align="center" label="姓名">
					</el-table-column>
					<el-table-column prop="address" align="center" label="历史住院号">
					</el-table-column>
					<el-table-column prop="address" align="center" label="性别">
					</el-table-column>
					<el-table-column prop="address" align="center" label="医院">
					</el-table-column>
					<el-table-column prop="address" align="center" label="科室">
					</el-table-column>
					<el-table-column prop="address" align="center" label="医生">
					</el-table-column>
					<el-table-column prop="address" align="center" label="当前医院">
					</el-table-column>
					<el-table-column prop="address" align="center" label="当前科室">
					</el-table-column>
					<el-table-column prop="address" align="center" label="当前病区">
					</el-table-column>
					<el-table-column prop="address" align="center" label="最近出科时间">
					</el-table-column>
					<el-table-column prop="address" align="center" label="操作">
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<el-dialog title="添加患者" :visible.sync="dialogVisible" width="768px" :before-close="handleClose">
			<el-form label-position="right" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="住院号" prop="name">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号" prop="name">
							<el-input></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别" prop="name">
							<el-radio-group>
								<el-radio label="男"></el-radio>
								<el-radio label="女"></el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="出生日期" prop="name">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="科室" prop="name">
							<el-select filterable placeholder="请选择" class="w-full">
								<el-option v-for="item in [{ value: '', label: '系统科室' }]" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="状态" prop="name">
							<el-radio-group>
								<el-radio label="住院"></el-radio>
								<el-radio label="非住院"></el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="责任医生" prop="name">
							<el-select filterable placeholder="请选择" class="w-full">
								<el-option v-for="item in [{ value: '', label: '系统医生' }]" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="责任护士" prop="name">
							<el-select filterable placeholder="请选择" class="w-full">
								<el-option v-for="item in [{ value: '', label: '系统护士' }]" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="床号" prop="name">
							<el-input></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="入院时间" prop="name">
							<el-date-picker type="date" placeholder="选择日期" class="w-full">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="糖尿病类型" prop="name">
							<el-input></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="诊断时间" prop="name">
							<el-input></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="入院诊断" prop="name">
							<el-autocomplete class="inline-input w-full" placeholder="请输入关键词"></el-autocomplete>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="出院诊断" prop="name">
							<el-input disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<el-link type="primary" :underline="false">更多资料</el-link>
					</el-col>
				</el-row>
			</el-form>

			<span slot="footer" style="text-align: left">
				<el-button type="primary" size="small" @click="addPatient">提交</el-button>
				<el-button type="primary" size="small" @click="addPatient">提交并设置测量方案</el-button>
				<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Card from "./components/Card.vue";
	import List from "./components/List.vue";
	export default {
		name: "PatientManage",
		components: {
			Card,
			List,
		},
		data() {
			return {
				activeName: "HOSPITALIZATION",
				cardMode: "card", //卡片展示模式
				dialogVisible: false,
				departmentOptions: [{
					value: "",
					label: "科室",
					children: [{
							value: "",
							label: "全部科室",
						},
						{
							value: "",
							label: "系统科室",
						},
					],
				}, ],
				options: [{
						value: "",
						label: "样表下载",
					},
					{
						value: "",
						label: "批量添加",
					},
				],
			};
		},
		methods: {
			addPatient() {
				this.dialogVisible = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}
</style>
